<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS :interval="5000" arrow="always" -->
  <link rel="stylesheet" href="index.css">
</head>
<body style="margin:0">
  <div id="app" >
  <el-carousel :height="screenHeight" width="100%" :interval=5000 id="el-carousel" direction="vertical">
  	<el-carousel-item v-for="item in items" :key="item">
		<iframe :id="item.id" frameborder="0" scrolling="auto" name="main" :src="item.url" style=" height:100%; visibility: inherit; width: 100%; z-index: 1;overflow: visible;">
		</iframe>
    </el-carousel-item>
  </el-carousel>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="index.js"></script>
  <script>
    new Vue({
		el: '#app',
		data: function() {
			return { 
				screenHeight: 1080,
				screenWidth: 1920,
				visible: false,
				items:[{
					"url": "http://datavisual.hezyun.cn:18088/chudy_visual/view/1495578212510466048",
					"duration": 10,
					"id": "1001"
				}, {
					"url": "http://datavisual.hezyun.cn:18088/chudy_visual/view/1494118268066070528",
					"duration": 10,
					"id": "1002"
				}, {
					"url": "http://datavisual.hezyun.cn:18088/chudy_visual/view/1495592342579576832",
					"duration": 10,
					"id": "1003"
				}]
			}
		},mounted() {
		  this.setSize();
		  const that = this;
		  //监听浏览器窗口大小改变
		  window.addEventListener('resize', function() {
			that.setSize();
		  }, false);
		},
		methods: {
		  setSize: function() {
			var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			this.screenWidth = width;
			//图片                高 / 宽  500 / 1920
			this.screenHeight = 500 / 1920 * this.screenWidth - 50;
			this.screenHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) + "px";
			
			//document.getElementById('el-carousel').style.height = this.screenHeight + 'px';
		  },
		}
    })
  </script>
</html>